import React, { Component } from "react";
import  {connect} from "react-redux"
import {getDetailInfo} from "./store/action"
import { withRouter } from "react-router-dom";
import "./index.scss"
class Detail extends Component {
  render() {
  
    return (
      <div key={this.props.location.key}>
      <div className="DetailWrapper">
        <div className="Header">{this.props.title}</div>
        <div className="Content">
        <div dangerouslySetInnerHTML={{__html: this.props.content}}></div>

        </div>
      </div>
      </div>
    );
  }
  componentDidMount() {
    this.props.changeDetailData(this.props.location.id);
    console.log(this.props.location);
    
  }
}
const mapState=(state)=>({
  title:state.getIn(["detail","title"]),
  content:state.getIn(["detail","content"])

})
const mapDispatch=(dispatch)=>({
  changeDetailData(id) {
    console.log("mount");
    dispatch(getDetailInfo(id));
  },

})
export default connect(mapState, mapDispatch)(withRouter(Detail));